<!DOCTYPE html>
<title>Mesh2D Demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  canvas {
    width: 1024px;
    height: 1024px;
    background-color: #ccc;
    display: none;
  }

  .root {
    display: flex;
  }

  .controls {
    display: flex;
  }
  .controls-left  { width: 50%; }
  .controls-right { width: 50%; }
  .controls-right select { width: 100%; }

  #loader {
    width: 1024px;
    height: 1024px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f1f2f3;
    font: bold 2em monospace;
    color: #85a2b6;
  }
</style>

<div class="root">
  <div id="loader">
    <img src="BeanEater-1s-200px.gif">
    <div>Fetching <a href="https://skia.org/docs/user/modules/canvaskit/">CanvasKit</a>...</div>
  </div>

  <div id="canvas_wrapper">
    <canvas id="canvas2d" width="1024" height="1024"></canvas>
    <canvas id="canvas3d" width="1024" height="1024"></canvas>
  </div>

  <div class="controls">
    <div class="controls-left">
      <div>Show mesh</div>
      <div>Level of detail</div>
      <div>Animator</div>
      <div>Renderer</div>
    </div>
    <div class="controls-right">
      <div>
        <input type="checkbox" id="show_mesh"/>
      </div>
      <div>
        <select id="lod">
          <option value="4">4x4</option>
          <option value="8" selected>8x8</option>
          <option value="16">16x16</option>
          <option value="32">32x32</option>
          <option value="64">64x64</option>
          <option value="128">128x128</option>
          <option value="255">255x255</option>
        </select>
      </div>
      <div>
        <select id="animator">
          <option value="">Manual</option>
          <option value="squircleAnimator">Squircle</option>
          <option value="twirlAnimator">Twirl</option>
          <option value="wiggleAnimator">Wiggle</option>
          <option value="cylinderAnimator" selected>Cylinder</option>
        </select>
      </div>
      <div>
        <select id="renderer" disabled>
          <option value="ckRenderer" selected>CanvasKit (polyfill)</option>
          <option value="nativeRenderer">Canvas2D (native)</option>
        </select>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="canvaskit.js"></script>

<script type="text/javascript">
  class MeshData {
    constructor(size, renderer) {
      const vertex_count = size*size;

      // 2 floats per point
      this.verts          = new Float32Array(vertex_count*2);
      this.animated_verts = new Float32Array(vertex_count*2);
      this.uvs            = new Float32Array(vertex_count*2);

      let i = 0;
      for (let y = 0; y < size; ++y) {
        for (let x = 0; x < size; ++x) {
          // To keep things simple, all vertices are normalized.
          this.verts[i + 0] = this.uvs[i + 0] = x / (size - 1);
          this.verts[i + 1] = this.uvs[i + 1] = y / (size - 1);

          i += 2;
        }
      }

      // 2 triangles per LOD square, 3 indices per triangle
      this.indices = new Uint16Array((size - 1)*(size - 1)*6);
      i = 0;
      for (let y = 0; y < size - 1; ++y) {
        for (let x = 0; x < size - 1; ++x) {
          const vidx0 = x + y*size;
          const vidx1 = vidx0 + size;

          this.indices[i++] = vidx0;
          this.indices[i++] = vidx0 + 1;
          this.indices[i++] = vidx1 + 1;

          this.indices[i++] = vidx0;
          this.indices[i++] = vidx1;
          this.indices[i++] = vidx1 + 1;
        }
      }

      // These can be cached upfront (constant during animation).
      this.uvBuffer    = renderer.makeUVBuffer(this.uvs);
      this.indexBuffer = renderer.makeIndexBuffer(this.indices);
    }

    animate(animator) {
      function bezier(t, p0, p1, p2, p3){
        return (1 - t)*(1 - t)*(1 - t)*p0 +
                   3*(1 - t)*(1 - t)*t*p1 +
                         3*(1 - t)*t*t*p2 +
                                 t*t*t*p3;
      }

      // Tuned for non-linear transition.
      function ease(t) { return bezier(t, 0, 0.4, 1, 1); }

      if (!animator) {
        return;
      }

      const ms = Date.now() - timeBase;
      const  t = Math.abs((ms / 1000) % 2 - 1);

      animator(this.verts, this.animated_verts, t);
    }

    generateTriangles(func) {
      for (let i = 0; i < this.indices.length; i += 3) {
        const i0 = 2*this.indices[i + 0];
        const i1 = 2*this.indices[i + 1];
        const i2 = 2*this.indices[i + 2];

        func(this.animated_verts[i0 + 0], this.animated_verts[i0 + 1],
             this.animated_verts[i1 + 0], this.animated_verts[i1 + 1],
             this.animated_verts[i2 + 0], this.animated_verts[i2 + 1]);
      }
    }
  }

  class PatchControls {
    constructor() {
      this.controls = [
        { pos: [ 0.00, 0.33], color: '#0ff', deps: []      },
        { pos: [ 0.00, 0.00], color: '#0f0', deps: [0, 2]  },
        { pos: [ 0.33, 0.00], color: '#0ff', deps: []      },

        { pos: [ 0.66, 0.00], color: '#0ff', deps: []      },
        { pos: [ 1.00, 0.00], color: '#0f0', deps: [3, 5]  },
        { pos: [ 1.00, 0.33], color: '#0ff', deps: []      },

        { pos: [ 1.00, 0.66], color: '#0ff', deps: []      },
        { pos: [ 1.00, 1.00], color: '#0f0', deps: [6, 8]  },
        { pos: [ 0.66, 1.00], color: '#0ff', deps: []      },

        { pos: [ 0.33, 1.00], color: '#0ff', deps: []      },
        { pos: [ 0.00, 1.00], color: '#0f0', deps: [9, 11] },
        { pos: [ 0.00, 0.66], color: '#0ff', deps: []      },
      ];

      this.radius = 0.01;
      this.drag_target = null;
    }

    mapMouse(ev) {
      const w = canvas2d.width,
            h = canvas2d.height;
      return [
        (ev.offsetX - w*(1 - meshScale)*0.5)/(w*meshScale),
        (ev.offsetY - h*(1 - meshScale)*0.5)/(h*meshScale),
      ];
    }

    onMouseDown(ev) {
      const mouse_pos = this.mapMouse(ev);

      for (let i = this.controls.length - 1; i >= 0; --i) {
        const dx = this.controls[i].pos[0] - mouse_pos[0],
              dy = this.controls[i].pos[1] - mouse_pos[1];

        if (dx*dx + dy*dy <= this.radius*this.radius) {
          this.drag_target = this.controls[i];
          this.drag_offset = [dx, dy];
          break;
        }
      }
    }

    onMouseMove(ev) {
      if (!this.drag_target) return;

      const mouse_pos = this.mapMouse(ev),
                   dx = mouse_pos[0] + this.drag_offset[0] - this.drag_target.pos[0],
                   dy = mouse_pos[1] + this.drag_offset[1] - this.drag_target.pos[1];

      this.drag_target.pos = [ this.drag_target.pos[0] + dx, this.drag_target.pos[1] + dy ];

      for (let dep_index of this.drag_target.deps) {
        const dep = this.controls[dep_index];
        dep.pos = [ dep.pos[0] + dx, dep.pos[1] + dy ];
      }

      this.updateVerts();
    }

    onMouseUp(ev) {
      this.drag_target = null;
    }

    updateVerts() {
      this.samplePatch(parseInt(lodSelectUI.value), meshData.animated_verts);
    }

    drawUI(line_func, circle_func) {
      for (let i = 0; i < this.controls.length; i += 3) {
        const c0 = this.controls[i + 0],
              c1 = this.controls[i + 1],
              c2 = this.controls[i + 2];

        line_func(c0.pos, c1.pos, '#f00');
        line_func(c1.pos, c2.pos, '#f00');
        circle_func(c0.pos, this.radius, c0.color);
        circle_func(c1.pos, this.radius, c1.color);
        circle_func(c2.pos, this.radius, c2.color);
      }
    }

    // Based on https://github.com/google/skia/blob/de56f293eb41d65786b9e6224fdf9a4702b30f51/src/utils/SkPatchUtils.cpp#L84
    sampleCubic(cind, lod) {
      const divisions = lod - 1,
                    h = 1/divisions,
                   h2 = h*h,
                   h3 = h*h2,
                  pts = [
                          this.controls[cind[0]].pos,
                          this.controls[cind[1]].pos,
                          this.controls[cind[2]].pos,
                          this.controls[cind[3]].pos,
                        ],
               coeffs = [
                          [
                            pts[3][0] + 3*(pts[1][0] - pts[2][0]) - pts[0][0],
                            pts[3][1] + 3*(pts[1][1] - pts[2][1]) - pts[0][1],
                          ],
                          [
                            3*(pts[2][0] - 2*pts[1][0] + pts[0][0]),
                            3*(pts[2][1] - 2*pts[1][1] + pts[0][1]),
                          ],
                          [
                            3*(pts[1][0] - pts[0][0]),
                            3*(pts[1][1] - pts[0][1]),
                          ],
                          pts[0],
                        ],
              fwDiff3 = [
                          6*h3*coeffs[0][0],
                          6*h3*coeffs[0][1],
                        ];

      let fwDiff = [
                     coeffs[3],
                     [
                       h3*coeffs[0][0] + h2*coeffs[1][0] + h*coeffs[2][0],
                       h3*coeffs[0][1] + h2*coeffs[1][1] + h*coeffs[2][1],
                     ],
                     [
                       fwDiff3[0] + 2*h2*coeffs[1][0],
                       fwDiff3[1] + 2*h2*coeffs[1][1],
                     ],
                     fwDiff3,
                   ];

      let verts = [];

      for (let i = 0; i <= divisions; ++i) {
        verts.push(fwDiff[0]);
        fwDiff[0] = [ fwDiff[0][0] + fwDiff[1][0], fwDiff[0][1] + fwDiff[1][1] ];
        fwDiff[1] = [ fwDiff[1][0] + fwDiff[2][0], fwDiff[1][1] + fwDiff[2][1] ];
        fwDiff[2] = [ fwDiff[2][0] + fwDiff[3][0], fwDiff[2][1] + fwDiff[3][1] ];
      }

      return verts;
    }

    // Based on https://github.com/google/skia/blob/de56f293eb41d65786b9e6224fdf9a4702b30f51/src/utils/SkPatchUtils.cpp#L256
    samplePatch(lod, verts) {
      const top_verts = this.sampleCubic([  1,  2,  3,  4 ], lod),
          right_verts = this.sampleCubic([  4,  5,  6,  7 ], lod),
         bottom_verts = this.sampleCubic([ 10,  9,  8,  7 ], lod),
           left_verts = this.sampleCubic([  1,  0, 11, 10 ], lod);

      let i = 0;
      for (let y = 0; y < lod; ++y) {
        const v = y/(lod - 1),
           left = left_verts[y],
          right = right_verts[y];

        for (let x = 0; x < lod; ++x) {
          const u = x/(lod - 1),
              top = top_verts[x],
           bottom = bottom_verts[x],

               s0 = [
                      (1 - v)*top[0] + v*bottom[0],
                      (1 - v)*top[1] + v*bottom[1],
                    ],
               s1 = [
                      (1 - u)*left[0] + u*right[0],
                      (1 - u)*left[1] + u*right[1],
                    ],
               s2 = [
                      (1 - v)*((1 - u)*this.controls[ 1].pos[0] + u*this.controls[4].pos[0]) +
                            v*((1 - u)*this.controls[10].pos[0] + u*this.controls[7].pos[0]),
                      (1 - v)*((1 - u)*this.controls[ 1].pos[1] + u*this.controls[4].pos[1]) +
                            v*((1 - u)*this.controls[10].pos[1] + u*this.controls[7].pos[1]),
                    ];

          verts[i++] = s0[0] + s1[0] - s2[0];
          verts[i++] = s0[1] + s1[1] - s2[1];
        }
      }
    }
  }

  class CKRenderer {
    constructor(ck, img, canvasElement) {
      this.ck = ck;
      this.surface = ck.MakeCanvasSurface(canvasElement);
      this.meshPaint = new ck.Paint();

      // UVs are normalized, so we scale the image shader down to 1x1.
      const skimg = ck.MakeImageFromCanvasImageSource(img);
      const localMatrix = [1/skimg.width(),  0, 0,
                           0, 1/skimg.height(), 0,
                           0,                0, 1];

      this.meshPaint.setShader(skimg.makeShaderOptions(ck.TileMode.Decal,
                                                       ck.TileMode.Decal,
                                                       ck.FilterMode.Linear,
                                                       ck.MipmapMode.None,
                                                       localMatrix));

      this.gridPaint = new ck.Paint();
      this.gridPaint.setColor(ck.BLUE);
      this.gridPaint.setAntiAlias(true);
      this.gridPaint.setStyle(ck.PaintStyle.Stroke);

      this.controlsPaint = new ck.Paint();
      this.controlsPaint.setAntiAlias(true);
      this.controlsPaint.setStyle(ck.PaintStyle.Fill);
    }

    // Unlike the native renderer, CK drawVertices() takes typed arrays directly - so
    // we don't need to allocate separate buffers.
    makeVertexBuffer(buf) { return buf; }
    makeUVBuffer    (buf) { return buf; }
    makeIndexBuffer (buf) { return buf; }

    meshPath(mesh) {
      // 4 commands per triangle, 3 floats per cmd
      const cmds = new Float32Array(mesh.indices.length*12);
      let ci = 0;
      mesh.generateTriangles((x0, y0, x1, y1, x2, y2) => {
        cmds[ci++] = this.ck.MOVE_VERB; cmds[ci++] = x0; cmds[ci++] = y0;
        cmds[ci++] = this.ck.LINE_VERB; cmds[ci++] = x1; cmds[ci++] = y1;
        cmds[ci++] = this.ck.LINE_VERB; cmds[ci++] = x2; cmds[ci++] = y2;
        cmds[ci++] = this.ck.LINE_VERB; cmds[ci++] = x0; cmds[ci++] = y0;
      });
      return this.ck.Path.MakeFromCmds(cmds);
    }

    drawMesh(mesh, ctrls) {
      const vertices = this.ck.MakeVertices(this.ck.VertexMode.Triangles,
                                            this.makeVertexBuffer(mesh.animated_verts),
                                            mesh.uvBuffer, null, mesh.indexBuffer, false);

      const canvas = this.surface.getCanvas();
      const w = this.surface.width(),
            h = this.surface.height();

      canvas.save();
        canvas.translate(w*(1-meshScale)*0.5, h*(1-meshScale)*0.5);
        canvas.scale(w*meshScale, h*meshScale);

        canvas.drawVertices(vertices, this.ck.BlendMode.Dst, this.meshPaint);

        if (showMeshUI.checked) {
          canvas.drawPath(this.meshPath(mesh), this.gridPaint);
        }

        ctrls?.drawUI(
            (p0, p1, color) => {
                this.controlsPaint.setColor(this.ck.parseColorString(color));
                canvas.drawLine(p0[0], p0[1], p1[0], p1[1], this.controlsPaint);
            },
            (c, r, color) => {
                this.controlsPaint.setColor(this.ck.parseColorString(color));
                canvas.drawCircle(c[0], c[1], r, this.controlsPaint);
            }
        );
      canvas.restore();
      this.surface.flush();
    }
  }

  class NativeRenderer {
    constructor(img, canvasElement) {
      this.img = img;
      this.ctx = canvasElement.getContext("2d");
    }

    // New Mesh2D API: https://github.com/fserb/canvas2D/blob/master/spec/mesh2d.md#mesh2d-api
    makeVertexBuffer(buf) { return this.ctx.createMesh2DVertexBuffer(buf); }
    makeUVBuffer(buf) {
        return this.ctx.createMesh2DUVBuffer(buf);
    }
    makeIndexBuffer(buf)  { return this.ctx.createMesh2DIndexBuffer(buf); }

    meshPath(mesh) {
      const path = new Path2D();
      mesh.generateTriangles((x0, y0, x1, y1, x2, y2) => {
        path.moveTo(x0, y0);
        path.lineTo(x1, y1);
        path.lineTo(x2, y2);
        path.lineTo(x0, y0);
      });
      return path;
    }

    drawMesh(mesh, ctrls) {
      const vbuf = this.ctx.createMesh2DVertexBuffer(mesh.animated_verts);
      const w = canvas2d.width,
            h = canvas2d.height;

      this.ctx.clearRect(0, 0, canvas2d.width, canvas2d.height);
      this.ctx.save();
        this.ctx.translate(w*(1-meshScale)*0.5, h*(1-meshScale)*0.5);
        this.ctx.scale(w*meshScale, h*meshScale);

        this.ctx.drawMesh(vbuf, mesh.uvBuffer, mesh.indexBuffer, this.img);

        if (showMeshUI.checked) {
          this.ctx.strokeStyle = "blue";
          this.ctx.lineWidth = 0.001;
          this.ctx.stroke(this.meshPath(mesh));
        }

        ctrls?.drawUI(
            (p0, p1, color) => {
                this.ctx.lineWidth = 0.001;
                this.ctx.strokeStyle = color;
                this.ctx.beginPath();
                this.ctx.moveTo(p0[0], p0[1]);
                this.ctx.lineTo(p1[0], p1[1]);
                this.ctx.stroke();
            },
            (c, r, color) => {
                this.ctx.fillStyle = color;
                this.ctx.beginPath();
                this.ctx.arc(c[0], c[1], r, 0, 2*Math.PI);
                this.ctx.fill();
            }
        );
      this.ctx.restore();
    }
  }

  function squircleAnimator(verts, animated_verts, t) {
    function lerp(a, b, t) { return a + t*(b - a); }

    for (let i = 0; i < verts.length; i += 2) {
      const uvx = verts[i + 0] - 0.5,
            uvy = verts[i + 1] - 0.5,
              d = Math.sqrt(uvx*uvx + uvy*uvy)*0.5/Math.max(Math.abs(uvx), Math.abs(uvy)),
              s = d > 0 ? lerp(1, (0.5/ d), t) : 1;
      animated_verts[i + 0] = uvx*s + 0.5;
      animated_verts[i + 1] = uvy*s + 0.5;
    }
  }

  function twirlAnimator(verts, animated_verts, t) {
    const kMaxRotate = Math.PI*4;

    for (let i = 0; i < verts.length; i += 2) {
      const uvx = verts[i + 0] - 0.5,
            uvy = verts[i + 1] - 0.5,
              r = Math.sqrt(uvx*uvx + uvy*uvy),
              a = kMaxRotate * r * t;
      animated_verts[i + 0] = uvx*Math.cos(a) - uvy*Math.sin(a) + 0.5;
      animated_verts[i + 1] = uvy*Math.cos(a) + uvx*Math.sin(a) + 0.5;
    }
  }

  function wiggleAnimator(verts, animated_verts, t) {
    const radius = t*0.2/(Math.sqrt(verts.length/2) - 1);

    for (let i = 0; i < verts.length; i += 2) {
      const phase = i*Math.PI*0.1505;
      const angle = phase + t*Math.PI*2;
      animated_verts[i + 0] = verts[i + 0] + radius*Math.cos(angle);
      animated_verts[i + 1] = verts[i + 1] + radius*Math.sin(angle);
    }
  }

  function cylinderAnimator(verts, animated_verts, t) {
    const kCylRadius = .2;
    const cyl_pos = t;

    for (let i = 0; i < verts.length; i += 2) {
      const uvx = verts[i + 0],
            uvy = verts[i + 1];

      if (uvx <= cyl_pos) {
        animated_verts[i + 0] = uvx;
        animated_verts[i + 1] = uvy;
        continue;
      }

      const arc_len = uvx - cyl_pos,
            arc_ang = arc_len/kCylRadius;

      animated_verts[i + 0] = cyl_pos + Math.sin(arc_ang)*kCylRadius;
      animated_verts[i + 1] = uvy;
    }
  }

  function drawFrame() {
    meshData.animate(animator);
    currentRenderer.drawMesh(meshData, patchControls);
    requestAnimationFrame(drawFrame);
  }

  function switchRenderer(renderer) {
    currentRenderer = renderer;
    meshData = new MeshData(parseInt(lodSelectUI.value), currentRenderer);

    const showCanvas = renderer == ckRenderer ? canvas3d : canvas2d;
    const hideCanvas = renderer == ckRenderer ? canvas2d : canvas3d;
    showCanvas.style.display = 'block';
    hideCanvas.style.display = 'none';

    patchControls?.updateVerts();
  }

  const canvas2d = document.getElementById("canvas2d");
  const canvas3d = document.getElementById("canvas3d");
  const hasMesh2DAPI = 'drawMesh' in CanvasRenderingContext2D.prototype;
  const showMeshUI = document.getElementById("show_mesh");
  const lodSelectUI = document.getElementById("lod");
  const animatorSelectUI = document.getElementById("animator");
  const rendererSelectUI = document.getElementById("renderer");

  const meshScale = 0.75;

  const loadCK = CanvasKitInit({ locateFile: (file) => 'https://demos.skia.org/demo/mesh2d/' + file });
  const loadImage = new Promise(resolve => {
    const image = new Image();
    image.addEventListener('load', () => { resolve(image); });
    image.src = 'baby_tux.png';
  });

  var ckRenderer;
  var nativeRenderer;
  var currentRenderer;
  var meshData;
  var image;

  const timeBase = Date.now();

  var animator = window[animatorSelectUI.value];
  var patchControls = animator ? null : new PatchControls();

  Promise.all([loadCK, loadImage]).then(([ck, img]) => {
    ckRenderer = new CKRenderer(ck, img, canvas3d);
    nativeRenderer = 'drawMesh' in CanvasRenderingContext2D.prototype
        ? new NativeRenderer(img, canvas2d)
        : null;

    rendererSelectUI.disabled = !nativeRenderer;
    rendererSelectUI.value = nativeRenderer ? "nativeRenderer" : "ckRenderer";

    document.getElementById('loader').style.display = 'none';
    switchRenderer(nativeRenderer ? nativeRenderer : ckRenderer);

    requestAnimationFrame(drawFrame);
  });

  lodSelectUI.onchange      = () => { switchRenderer(currentRenderer); }
  rendererSelectUI.onchange = () => { switchRenderer(window[rendererSelectUI.value]); }
  animatorSelectUI.onchange = () => {
    animator = window[animatorSelectUI.value];
    patchControls = animator ? null : new PatchControls();
    patchControls?.updateVerts();
  }

  const cwrapper = document.getElementById('canvas_wrapper');
  cwrapper.onmousedown = (ev) => { patchControls?.onMouseDown(ev); }
  cwrapper.onmousemove = (ev) => { patchControls?.onMouseMove(ev); }
  cwrapper.onmouseup   = (ev) => { patchControls?.onMouseUp(ev); }
</script>